<template>
  <div class="box-border flex w-[100%] items-start justify-between pt-5 lg:mx-auto lg:w-[1024px] lg:flex-wrap lg:pl-5">
    <div
      class="shadow-2xl box-border hidden w-[280px] shrink-0 rounded-3xl bg-[#23282a] px-5 pb-5 lg:mb-5 lg:block lg:w-[49%]"
      v-for="(item, index) in hotGoodsList"
      :key="index">
      <ListItem :hotGoodsInfo="item" />
    </div>
    <van-swipe class="lg:hidden ml-4 pr-4" :loop="false" :width="280" :show-indicators="false">
      <van-swipe-item class="pr-4" style="width: 280px" v-for="(item, index) in hotGoodsList" :key="index">
        <div class="rounded-3xl bg-[#23282a] px-4 pb-4">
          <ListItem :hotGoodsInfo="item" />
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
import ListItem from '~/components/home/ListItem.vue'
import { useRequest } from '~/composables/useRequest'

const hotGoodsList = ref([])
const { requestGet, requestPost } = useRequest()
// 服务端渲染的数据
const { data } = await useLazyAsyncData<any[]>(
  async () => {
    return await requestGet('/app/home/recommendDeals')
  },
  { default: () => [] },
)

watchImmediate(data, () => {
  if (data === null) return
  hotGoodsList.value = data.value.data
})
</script>

<style lang="scss"></style>
